<template>
  <!-- 品牌创新 -->

  <div class="brandPc">
    <tabs :index="1"></tabs>
    <!-- 超级品牌 -->
    <div class="brand" id="68">
      <!-- <img class="title" src="../../../assets/image/innovation/t-brand.png" /> -->
      <div class="title-box">
        <div class="text">
          <div class="t1">{{ brand?.name }}</div>
          <div class="v"></div>
          <div class="t2">{{ brand?.description }}</div>
        </div>
        <div class="line"></div>
      </div>
      <div v-html="brand.contentweb"></div>
    </div>
    <!-- 超级ip -->
    <div class="ip" id="69">
      <!-- <img class="title" src="../../../assets/image/innovation/t-ip.png" /> -->
      <div class="header-text">
        <div class="title-box">
          <div class="title-text">
            <div class="t1">{{ ip?.name }}</div>
            <div class="v"></div>
            <div class="t2">{{ ip?.description }}</div>
          </div>
          <div class="line"></div>
        </div>
        <!-- <div class="text-web"> -->
        <div v-html="ip?.contentweb"></div>
        <!-- </div> -->
      </div>
      <div class="video-frame">
        <div class="video-bg"></div>

        <div class="video-box" v-if="video.status == 1">
          <div class="video-title">{{ video.name }}</div>
          <video
            class="left"
            v-if="currentVideo"
            :key="currentVideo.id"
            :poster="currentVideo.webimages"
            controls
          >
            <source :src="currentVideo.videofile" type="video/mp4" />
          </video>
          <div class="right">
            <img
              class="item"
              v-for="(item, index) in video.list"
              :key="index"
              :src="item.webimages"
              @click="toWeb(item, index)"
            />
          </div>
        </div>
      </div>

      <!-- <div class="name">小葵花妈妈课堂（儿童常见病专家科普视频100期）</div> -->
      <!-- <div class="name" style="margin-top:20px" v-if="video.status == 1">{{video.name}}</div> -->
      <div class="album-box">
        <div
          class="item"
          v-for="item in classroom"
          :key="item.id"
          @click="videoClick(item)"
        >
          <img class="img" :src="item.image" />
          <div class="text">{{ item.name }}</div>
          <div class="detail">
            <div class="t">查看详情</div>
            <img class="ic" src="@/assets/image/home/ic_right.png" />
          </div>
        </div>
      </div>
    </div>
    <!-- 超级流量 -->
    <div class="traffic" id="70">
      <!-- <img class="title" src="../../../assets/image/innovation/t-traffic.png" /> -->
      <div class="title-box">
        <div class="text">
          <div class="t1">{{ traffic?.name }}</div>
          <div class="v"></div>
          <div class="t2">{{ traffic?.description }}</div>
        </div>
        <div class="line"></div>
      </div>
      <div v-html="traffic?.contentweb"></div>
    </div>
  </div>

  <!-- 移动端 -->
  <div class="brandMobile">
    <tabs :index="1"></tabs>
    <!-- 超级品牌 -->
    <div class="brand" id="m68">
      <!-- <img class="title" src="../../../assets/image/innovation/m-title.png" /> -->
      <div class="title-box">
        <div class="title-text">
          <div class="t1">{{ brand?.name }}</div>
          <div class="v"></div>
          <div class="t2">{{ brand?.description }}</div>
        </div>
        <div class="line"></div>
      </div>
      <div class="text-web">
        <div v-html="brand.contentmobile"></div>
      </div>
    </div>
    <!-- 超级ip -->
    <div class="ip" id="m69">
      <!-- <img class="title" src="../../../assets/image/innovation/m-ip.png" /> -->
      <div class="title-box">
        <div class="title-text">
          <div class="t1">{{ ip?.name }}</div>
          <div class="v"></div>
          <div class="t2">{{ ip?.description }}</div>
        </div>
        <div class="line"></div>
      </div>
      <div class="text-web">
        <div v-html="ip?.contentmobile"></div>
      </div>
      <div class="video-frame">
        <!-- <div class="video-bg"></div> -->
        <img
          class="video-bg"
          src="../../../assets/image/product/m-video-bg.png"
        />
        <div class="video-box" v-if="video.status == 1">
          <div class="video-title">{{ video.name }}</div>
          <video
            class="left"
            v-if="currentVideo"
            :key="currentVideo.id"
            :poster="currentVideo.webimages"
            controls
          >
            <source :src="currentVideo.videofile" type="video/mp4" />
          </video>
          <app-scrollbar class="right">
            <!-- <div class="right"> -->
            <div class="scrollbar">
              <img
                class="item"
                v-for="(item, index) in video.list"
                :key="index"
                :src="item.webimages"
                @click="toWeb(item, index)"
              />
            </div>
            <!-- </div> -->
          </app-scrollbar>
        </div>
      </div>

      <!-- <div class="name">小葵花妈妈课堂（儿童常见病专家科普视频100期）</div> -->
      <!-- <div class="name" v-if="video.status == 1">{{video.name}}</div> -->
      <div class="album-box">
        <div
          class="item"
          v-for="item in classroom"
          :key="item.id"
          @click="videoClick(item)"
        >
          <img class="img" :src="item.image" />
          <div class="text">{{ item.name }}</div>
          <div class="detail">
            <div class="t">查看详情</div>
            <img class="ic" src="@/assets/image/home/ic_right.png" />
          </div>
        </div>
      </div>
    </div>
    <!-- 超级流量 -->
    <div class="traffic" id="m70">
      <!-- <img class="title" src="../../../assets/image/innovation/m-traffic.png" /> -->
      <div class="title-box">
        <div class="title-text">
          <div class="t1">{{ traffic?.name }}</div>
          <div class="v"></div>
          <div class="t2">{{ traffic?.description }}</div>
        </div>
        <div class="line"></div>
      </div>
      <div class="html"><div v-html="traffic?.contentmobile"></div></div>
    </div>
  </div>

  <video-detail :data="id" @cancel="cancel" v-if="isVideo" />
</template>

<script>
import videoDetail from "./videoDetail.vue";
import tabs from "./tabs.vue";
export default {
  components: { tabs, videoDetail },
  data() {
    return {
      id: "",
      isVideo: false,
      brand: {},
      ip: {},
      traffic: {},
      classroom: [],
      video: {
        list: [],
        index: 0,
        name: "",
        status: 1,
      },
    };
  },

  computed: {
    currentVideo() {
      return this.video.list[this.video.index];
    },
  },

  mounted() {
    // 初始化数据
    this.init();
  },
  methods: {
    /**
     * 初始化数据
     */
    async init() {
      // 发送请求
      const [brandInnovationSy, middleVideo, bottomVideo] = await Promise.all([
        this.$request.get("companyinno/brandInnovationSy", {
          params: {
            cid: 2,
          },
        }),
        this.$request.get("companyinno/middleVideo", {
          params: {
            cid: 114,
          },
        }),
        this.$request.get("companyinno/bottomVideo"),
      ]);

      // 设置数据
      const [brand, ip, traffic] = brandInnovationSy.data;

      //
      this.brand = brand;
      this.ip = ip;
      this.traffic = traffic;
      this.video.list = middleVideo?.data?.video;
      this.video.name = middleVideo?.data?.nav.name;
      this.video.status = middleVideo?.data?.nav.status;
      // this.video.list = this.video.list.concat(middleVideo.data);
      // this.video.list = this.video.list.concat(middleVideo.data);
      this.classroom = bottomVideo.data;
      this.to();
    },
    /**
     * 有链接首选跳链接
     * @param {*} e
     * @param {*} index
     */
    toWeb(e, index) {
      // if (e.linkurl) {
      //   window.open(e.linkurl);
      // } else {
      this.video.index = index;
      //  }
    },

    videoClick(e) {
      if (e.linkurl) {
        window.open(e.linkurl);
      } else {
        this.id = e.id;
        this.isVideo = true;
      }
    },
    cancel() {
      this.isVideo = false;
    },

    /**
     * 根据超级品牌 传过来的菜单id到指定位置
     */
    to() {
      if (this.$route.query.id) {
        // 等待dom加载完毕后执行
        this.$nextTick(() => {
          let targetbox;
          let target;
          //区分移动端和pc
          if (document.body.clientWidth <= 1200) {
            targetbox = document.getElementById("m" + this.$route.query.id);
            targetbox.scrollIntoView({ block: "start", behavior: "smooth" });
            console.log("m" + this.$route.query.id);
            // this.target = targetbox.offsetTop;
            //  document.body.scrollTop = target;
            //  document.documentElement.scrollTop = target;

            // 1,通过形参获取当前需要的dom
            //   targetbox = document.getElementById("m" + this.$route.query.id);
            // targetbox.scrollIntoView();
            // targetbox.scrollIntoView({ behavior: 'smooth' });
            //   // 2,获取该dom距离页头的高度
            //    target = targetbox.offsetTop;
            // window.scrollTop(target);
            // 3,执行页面跳转
            // document.body.scrollTop = target;
            // document.documentElement.scrollTop = target;
          } else {
            // 1,通过形参获取当前需要的dom
            targetbox = document.getElementById(this.$route.query.id);
            // 2,获取该dom距离页头的高度
            target = targetbox.offsetTop;

            // 3,执行页面跳转
            document.documentElement.scrollTop = target;
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .brandMobile {
    display: none;
  }

  .brandPc {
    @include fn.fluidContainer;

    // width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 10px;
    background: #fff;

    .brand {
      @include fn.container;
      margin-top: 60px;

      .title-box {
        // display: flex;
        flex-direction: column;
        box-sizing: border-box;

        .text {
          display: flex;
          width: fit-content;
          align-items: center;
          box-sizing: border-box;
          border-bottom: 2px solid color.$base;
          padding-bottom: 10px;

          .v {
            background: #e5e5e5;
            height: 14px;
            width: 2px;
            margin: 0 8px;
          }

          .t1 {
            font-weight: bold;
            font-size: 24px;

            color: #333333;
          }

          .t2 {
            font-weight: 400;
            font-size: 16px;
            color: #666;
          }
        }

        .line {
          width: 100%;
          // margin-top: 8px;
          height: 1px;
          background: color.$base;
        }
      }

      .title {
        height: 50px;
      }
    }

    .ip {
      padding: 50px 0;

      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f7f8f9;

      .header-text {
        @include fn.container;

        .title-box {
          // display: flex;
          flex-direction: column;
          box-sizing: border-box;

          .title-text {
            display: flex;
            width: fit-content;
            align-items: center;
            box-sizing: border-box;
            border-bottom: 2px solid color.$base;
            padding-bottom: 10px;

            .v {
              background: #e5e5e5;
              height: 14px;
              width: 2px;
              margin: 0 8px;
            }

            .t1 {
              font-weight: bold;
              font-size: 24px;

              color: #333333;
            }

            .t2 {
              font-weight: 400;
              font-size: 16px;
              color: #666;
            }
          }

          .line {
            width: 100%;
            // margin-top: 8px;
            height: 1px;
            background: color.$base;
          }
        }
        .name {
          width: 1200px;
          display: flex;
          justify-content: center;
          height: 20px;
          font-size: 20px;

          font-weight: 500;
          color: #333333;
          line-height: 60px;
        }

        .title {
          width: 1200px;
          height: 50px;
        }

        .text {
          margin-top: 10px;
          width: 1190px;

          font-size: 20px;

          font-weight: 400;
          color: #666666;
          line-height: 36px;
        }
      }

      .video-frame {
        margin-top: 20px;
        overflow: hidden;
        box-sizing: border-box;
        width: 1254px;
        display: flex;
        justify-content: center;
        position: relative;

        .video-bg {
          position: absolute;
          top: 10px;
          // width: 1254px;
          // height: 73px;
          width: 1260px;
          height: 120px;
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          // background-image: url(@/assets/image/innovation/video_bg.png);
          background-image: url(@/assets/image/product/p-video-bg.png);
        }

        .video-box {
          margin: 50px 0;
          background: #ffffff;
          box-shadow: 0px 12px 35px 0px rgba(192, 98, 2, 0.15);
          border-radius: 6px 6px 6px 6px;
          display: flex;
          position: relative;

          .video-title {
            @include fn.title();
            position: absolute;
            bottom: 20px;
            display: flex;
            width: 100%;
            justify-content: center;
          }
          .left {
            object-fit: cover;
            margin-top: 49px;
            margin-bottom: 70px;
            margin-left: 54px;
            // width: 873px;
            // height: 491px;
            @include fn.scale(873px);

            //
          }

          .right {
            // overflow-y: overlay;
            display: flex;
            flex-direction: column;
            //  gap: 16px;
            margin-top: 49px;
            // margin-bottom: 49px;
            margin-left: 15px;
            // width: 214px;
            height: 491px;
            flex: 1;
            padding-right: 20px;
            overflow-x: hidden;
            overflow-y: scroll;
            @include fn.scroll();

            .item:first-child {
              margin-top: 0;
            }

            .item {
              flex-shrink: 0;
              object-fit: cover;
              box-sizing: border-box;
              margin-top: 17px;
              @include fn.scale(196px);
              cursor: pointer;
            }
          }
        }
      }

      .album-box {
        width: 1200px;
        display: flex;
        // justify-content: space-between;
        .item:first-child {
          margin-left: 0;
        }

        .item {
          margin-left: 25px;
          position: relative;
          width: 381px;
          height: 313px;
          background: #ffffff;
          border: 1px solid #eeeeee;
          border-radius: 4px;
          display: flex;
          flex-direction: column;

          .img {
            @include fn.scale(381px);
          }

          .text {
            margin-top: 20px;
            margin-left: 14px;

            @include fn.title();
            line-height: 21px;
          }

          .detail {
            cursor: pointer;
            position: absolute;
            bottom: 10px;
            right: 20px;
            display: flex;
            align-items: center;

            .t {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 18px;

              font-weight: 400;
              color: color.$base;
            }

            .ic {
              object-fit: fill;
              margin-left: 8px;
              width: 12px;
              height: 12px;
            }
          }
        }
      }
    }

    .traffic {
      @include fn.container;
      margin-top: 57px;

      .title-box {
        margin-bottom: 37px;
        // display: flex;
        flex-direction: column;
        box-sizing: border-box;

        .text {
          display: flex;
          width: fit-content;
          align-items: center;
          box-sizing: border-box;
          border-bottom: 2px solid color.$base;
          padding-bottom: 10px;

          .v {
            background: #e5e5e5;
            height: 14px;
            width: 2px;
            margin: 0 8px;
          }

          .t1 {
            font-weight: bold;
            @include fn.title();
          }

          .t2 {
            font-weight: 400;
            font-size: 16px;
            color: #666;
          }
        }

        .line {
          width: 100%;
          // margin-top: 8px;
          height: 1px;
          background: color.$base;
        }
      }

      .title {
        width: 1200px;
        height: 50px;
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .brandPc {
    display: none;
  }

  .brandMobile {
    box-sizing: border-box;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;

    background: #fff;

    .brand {
      box-sizing: border-box;
      width: fn.rpx(700);
      padding: fn.rpx(40) 0;

      .title-box {
        display: block;
        width: fn.rpx(700);

        .title-text {
          display: flex;
          width: fit-content;
          align-items: center;
          box-sizing: border-box;
          border-bottom: fn.rpx(2) solid color.$base;
          padding-bottom: fn.rpx(9);

          .v {
            background: #e5e5e5;
            height: fn.rpx(14);
            width: fn.rpx(2);
            font-size: fn.rpx(8);
            margin: 0 fn.rpx(8);
          }

          .t1 {
            font-weight: bold;
            font-size: fn.rpx(26);

            color: #333333;
          }

          .t2 {
            font-weight: 400;
            font-size: fn.rpx(16);

            color: #666;
          }
        }

        .line {
          width: fn.rpx(700);

          height: fn.rpx(1);
          background: color.$base;
        }

        .text-web {
          width: fn.rpx(700);
        }
      }

      .title {
        // margin-left: fn.rpx(20);
        width: fn.rpx(750);
        height: fn.rpx(50);
      }
    }

    .ip {
      width: 100%;
      // margin-top: fn.rpx(40);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: fn.rpx(40) 0;
      background: #f7f8f9;

      .text-web {
        width: fn.rpx(700);
        overflow: hidden;
        box-sizing: border-box;
      }

      .title-box {
        // margin-left: fn.rpx(25);
        // display: block;
        width: fn.rpx(700);

        .title-text {
          display: flex;
          width: fit-content;
          align-items: center;
          box-sizing: border-box;
          border-bottom: fn.rpx(2) solid color.$base;
          padding-bottom: fn.rpx(9);

          .v {
            background: #e5e5e5;
            height: fn.rpx(14);
            width: fn.rpx(2);
            font-size: fn.rpx(8);
            margin: 0 fn.rpx(8);
          }

          .t1 {
            font-weight: bold;
            font-size: fn.rpx(24);

            color: #333333;
          }

          .t2 {
            font-weight: 400;
            font-size: fn.rpx(16);

            color: #666;
          }
        }

        .line {
          width: 100%;

          height: fn.rpx(1);
          background: color.$base;
        }
      }

      .name {
        margin-top: fn.rpx(20);
        width: 100%;
        display: flex;
        justify-content: center;
        height: fn.rpx(20);
        font-size: fn.rpx(20);

        font-weight: 500;
        color: #333333;
        line-height: fn.rpx(60);
      }

      .title {
        width: fn.rpx(750);
        height: fn.rpx(50);
      }

      .text {
        margin-top: fn.rpx(10);
        width: 100%;

        font-size: fn.rpx(20);

        font-weight: 400;
        color: #666666;
        line-height: fn.rpx(36);
      }

      .video-frame {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        .video-title {
          @include fn.title();
          position: absolute;
          bottom: fn.rpx(20);
          display: flex;
          width: 100%;
          justify-content: center;
        }
        .video-bg {
          position: absolute;
          top: fn.rpx(24);
          // width: 100%;
          // height: fn.rpx(84);
          width: fn.rpx(709);
          height: fn.rpx(37);
          //  z-index: 99;
          // background-size: 100% 100%;
          // background-position: center;
          // background-repeat: no-repeat;
          // background-image: url(@/assets/image/innovation/m_video_bg.png);
        }

        .video-box {
          position: relative;
          width: fn.rpx(700);
          margin-top: fn.rpx(52);
          background-color: #fff;
          box-shadow: 0px 12px 35px 0px rgba(192, 98, 2, 0.15);
          border-radius: fn.rpx(6);
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-bottom: fn.rpx(20);

          .left {
            margin-top: fn.rpx(49);
            margin-bottom: fn.rpx(20);
            @include fn.scale(fn.rpx(630));

            //
          }

          .right {
            width: fn.rpx(630);
            padding-bottom: fn.rpx(20);
            margin-bottom: fn.rpx(44);
            height: fn.rpx(80);

            .scrollbar {
              display: flex;
            }

            .item:first-child {
              margin-left: 0;
            }

            .item {
              margin-left: fn.rpx(14);
              @include fn.scale(fn.rpx(147));
              cursor: pointer;
            }
          }
        }
      }

      .album-box {
        margin-top: fn.rpx(40);
        width: fn.rpx(700);
        display: flex;
        flex-direction: column;

        .item {
          margin-top: fn.rpx(20);
          position: relative;
          width: 100%;
          height: fn.rpx(490);
          background: #ffffff;
          border: fn.rpx(1) solid #eeeeee;
          border-radius: fn.rpx(4);
          display: flex;
          flex-direction: column;

          .img {
            // width: 100%;
            // height: fn.rpx(355);
            @include fn.scale(fn.rpx(700));
          }

          .text {
            box-sizing: border-box;
            margin-top: fn.rpx(30);
            padding-left: fn.rpx(30);
            width: 100%;

            @include fn.title();
          }

          .detail {
            cursor: pointer;
            position: absolute;
            bottom: fn.rpx(30);
            right: fn.rpx(20);
            display: flex;
            align-items: center;

            .t {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: fn.rpx(16);

              font-weight: 400;
              color: color.$base;
            }

            .ic {
              object-fit: fill;
              margin-left: fn.rpx(8);
              width: fn.rpx(12);
              height: fn.rpx(12);
            }
          }
        }
      }
    }

    .traffic {
      width: fn.rpx(700);
      margin-top: fn.rpx(40);
      .html {
        width: 100%;
        overflow: hidden;
      }

      .title-box {
        // margin-left: fn.rpx(25);
        display: block;
        width: fn.rpx(700);

        .title-text {
          display: flex;
          width: fit-content;
          align-items: center;
          box-sizing: border-box;
          border-bottom: fn.rpx(2) solid color.$base;
          padding-bottom: fn.rpx(9);

          .v {
            background: #e5e5e5;
            height: fn.rpx(14);
            width: fn.rpx(2);
            font-size: fn.rpx(8);
            margin: 0 fn.rpx(8);
          }

          .t1 {
            font-weight: bold;
            font-size: fn.rpx(24);

            color: #333333;
          }

          .t2 {
            font-weight: 400;
            font-size: fn.rpx(16);

            color: #666;
          }
        }

        .line {
          width: fn.rpx(700);

          height: fn.rpx(1);
          background: color.$base;
        }
      }

      .title {
        width: fn.rpx(700);
        height: fn.rpx(50);
      }
    }
  }
}
</style>